<%--
  Created by IntelliJ IDEA.
  User: qiliping
  Date: 16/7/21
  Time: 下午5:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>20以内的加减法</title>
    <script>

    </script>
    <style type="text/css">
        .i_button {
            border: none;
            background: none;
            height: 100%;
            display: block;
            padding: 0.9rem 0;
            width: 100%;
            font-family: "微软雅黑";
            color: #000;
            font-size: 1.1rem;
        }

        .i_button:active {
            background: rgba(0, 0, 0, .2);
        }

        .mt_input {
            border-top: 1px solid #EEE;
            border-bottom: 1px solid #EEE;
            background: #FFF;
            padding: 0.65rem 1rem;
        }

        .mt_input input {
            width: 100%;
            border: none;
            background: none;
            font-size: 0.85rem;
        }

        .softkeyboard {
            width: 18rem;
            overflow: hidden;
        }

        .softkeyboard #shuzi {
            overflow: hidden;
        }

        .softkeyboard li {
            float: left;
            width: 33.3%;
            background: #ffffff;
        }

        .softkeyboard li div {
            border-bottom: 1px solid #EEE;
        }

        .softkeyboard li div.center {
            border-left: 1px solid #EEE;
            border-right: 1px solid #EEE;
        }

        .softkeyboard li.Enter {
            width: 100%;
            background: #ffaa3b;
        }

        .softkeyboard li.Enter .i_button {
            color: #FFF;
        }

        .softkeyboard li.Enter div {
            border: none;
        }

        .softkeyboard li.Enter div .i_button {
            padding: 0.85rem 0
        }
    </style>
</head>
<body>
<article class="viewports">
    <div class="tac ptb30 lh2 tac">
        <div class="fs30 c6">还剩<span id="q_num">50</span>题，加油！</div>
        <div class="fs34 c0" style="font-size:1.65rem;" id="question">1+1=?</div>
    </div>
    <!--star 虚拟键盘-->
    <div class="p_fotbtn" id="keyboard">
        <script>
            var num1 = 20;//数字1最大为20
            var num2 = 20;//数字2最大为20
            var add_substract = 0;//加减法，0加1减
            var question_num = 10;//最大结果20，最小0
            var q_list = [];

            chuti();


            function chuti() {

                do {
                    fRandom();
                }
                while (checkNum() == false);

                if (add_substract == 0) {
                    $("#question").html(num1 + '+' + num2 + '=?');
                } else {

                    $("#question").html(num1 + '-' + num2 + '=?');
                }
            }

            function checkNum() {
                if (add_substract == 0) {
                    var result = num1 + num2;
                    if (result > 20)return false;
                    else {
                        q_list[10-question_num]={'question':num1 + '+' + num2,'ask':'' };
                        return true;
                    }
                } else {
                    if (num1 < num2) return false;
                    else {
                        q_list[10-question_num]={'question':num1 + '-' + num2,'ask':'' };
                        return true;
                    }
                }
            }

            function fRandom() {
                num1 = fRandomBy(1, 20);
                num2 = fRandomBy(1, 20);
                add_substract = fRandomBy(0, 1);
            }


            function fRandomBy(under, over) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * under + 1);
                    case 2:
                        return parseInt(Math.random() * (over - under + 1) + under);
                    default:
                        return 0;
                }
            }


            //定义当前是否大写的状态
            var CapsLockValue = 0;
            var curEditName;
            var check;
            var html = '';
            html += ' <div class=\"softkeyboard\" id=\"softkeyboard\" name=\"softkeyboard\"">';
            html += '<div class="mt_input"><input type="text" name="text1" class="shuru input_cur" readonly="readonly" placeholder=""></div>';
            //html +=' ------数字----';
            html += ' <ul class=\"shuzi\" id="shuzi">';
            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'1\');\" value=\" 1 \"></div></li>';
            html += ' <li><div class="center"><input class="i_button i_button_num" type=button onclick=\"addValue(\'2\');\" value=\" 2 \"></div></li>';
            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'3\');\" value=\" 3 \"></div></li>';

            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'4\');\" value=\" 4 \"></div></li>';
            html += ' <li><div class="center"><input class="i_button i_button_num" type=button onclick=\"addValue(\'5\');\" value=\" 5 \"></div></li>';
            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'6\');\" value=\" 6 \"></div></li>';

            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'7\');\" value=\" 7 \"></div></li>';
            html += ' <li><div class="center"><input class="i_button i_button_num" type=button onclick=\"addValue(\'8\');\" value=\" 8 \"></div></li>';
            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"addValue(\'9\');\" value=\" 9 \"></div></li>';

            html += ' <li><div><input class="i_button i_button_num" type=button onclick=\"clearValue();\"  value=清空 ></div></li>';
            html += ' <li><div class="center"><input class="i_button i_button_num" type=button onclick=\"addValue(\'0\');\" value=\" 0 \"></div></li>';
            html += ' <li><div><input class="i_button i_button_num" type=button value=\" &times;\" onclick=\"backspace();\"></div></li>';

            html += ' <li class="Enter"><div><input class="i_button i_button_num" type=button onclick=\"nextValue();\"  value=下一题 ></div></li>';
            html += '</ul>';
            //html +='--------------------------------------------';

            html += '</div>';
            $("#keyboard").append(html);

            //给输入的密码框添加新值
            function addValue(newValue) {
                CapsLockValue == 0 ? $(".input_cur").val($(".shuru").val() + newValue) : $(".input_cur").val($(".shuru").val() + newValue.toUpperCase())
            }
            //清空
            function clearValue() {
                $(".input_cur").val("");
            }
            //下一题
            function nextValue() {
                var daan = $(".input_cur").val();
                if(daan==""){
                    alert("请先作答！");
                }else{
                    q_list[10-question_num].ask= daan;
                    alert(JSON.stringify(q_list[10-question_num]));
                    if(question_num>0){
                        question_num--;
                        $(".input_cur").val("");
                        chuti();
                        $("#q_num").html(question_num);
                    }else{
                        alert("恭喜您！您完成了！发朋友圈炫耀一下吧！");
                    }

                }
            }
            //实现BackSpace键的功能
            function backspace() {
                var longnum = $(".input_cur").val().length;
                var num;
                num = $(".input_cur").val().substr(0, longnum - 1);
                $(".input_cur").val(num);
            }
        </script>
    </div>
</article>
<!--end 虚拟键盘-->
<!--end 虚拟键盘-->
</body>
</html>
